<template>
    <el-dialog v-model="props.visible" title="查看备注" @close="handleClose" width="20%" destroy-on-close>
        <el-form :model="formData">
            <el-form-item label="成交状态">
                <span :class="props?.data?.dealStatus !== '0'?'completed':'uncompleted'">{{ props?.data?.dealStatus !== '0'?'已成交':'未成交' }}</span>
            </el-form-item>
            <el-form-item label="客户名称">
                {{ props.data?.customerName }}
            </el-form-item>
            <el-form-item label="备注">
                <el-input disabled type="textarea" v-model="formData.remark"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleClose" >确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
const props = defineProps(['visible','data']);

const formData = ref<any>({
    remark:undefined
});

const emit = defineEmits(['close']);

watch(()=>props.data,()=>{
    formData.value.remark = props.data.remark;
});

const handleClose = ()=>{
    formData.remark = undefined;
    emit('close');
};

</script>

<style scoped lang="scss">
.completed{
    color: yellowgreen
}
.uncompleted{
    color: orange
}
.dialog-footer{
    display:flex;
    justify-content: center;
}
</style>